<template>
  <div>
    <!-- 放置一个弹层 用来编辑新增节点 -->
    <el-dialog
      :title="`${showText}权限`"
      :visible="showDialog"
      @close="btnCancel"
    >
      <!-- 表单 -->
      <el-form
        ref="perForm"
        :model="formData"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item
          label="权限名称"
          prop="name"
        >
          <el-input
            v-model="formData.name"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="code"
        >
          <el-input
            v-model="formData.code"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item
          label="权限描述"
          prop="description"
        >
          <el-input
            v-model="formData.description"
            style="width:90%"
          />
        </el-form-item>
        <el-form-item label="开启">
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <el-row
        slot="footer"
        type="flex"
        justify="center"
      >
        <el-col :span="6">
          <el-button
            size="small"
            type="primary"
            @click="btnOK"
          >确定</el-button>
          <el-button
            size="small"
            @click="btnCancel"
          >取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { addPermission, getPermissionById, updatePermissionById } from '@/api/permission'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    pid: {
      type: String
    },
    typeNum: {
      type: Number
    }
  },
  data () {
    return {
      formData: {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        pid: '',
        type: ''
      },
      rules: {
        name: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        description: [{ required: true, message: '内容不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    showText () {
      return this.formData.id ? '编辑' : '添加'
    }
  },

  methods: {

    // 获取权限详情 根据id
    async getPermissionById (id) {
      this.formData = await getPermissionById(id)
      // console.log(res)
    },
    async btnOK () {
      // 1、表单校验通过
      // 2、发送请求
      // 3、提示
      // 4、更新数据
      // 4、关闭弹框

      await this.$refs.perForm.validate()
      if (this.formData.id) {
        await updatePermissionById(this.formData)
      } else {
        this.formData.pid = this.pid
        this.formData.type = this.typeNum
        await addPermission(this.formData)
      }
      this.$message.success('操作成功')
      this.$emit('update')
      this.$emit('update:show-dialog', false)
    },
    btnCancel () {
      // 1、将数据恢复到原始状态
      // 2、清除表单校验
      // 3、关闭弹窗
      this.formData = {
        name: '',
        code: '',
        description: '',
        enVisible: '',
        pid: '',
        type: ''
      }
      this.$refs.perForm.resetFields()
      this.$emit('update:show-dialog', false)
    }
  }
}
</script>
